<template>
  <div>
    <div class="father">
      {{name}}
      <div class="son">
        <div>{{obj.eat}}</div>
        <div>{{obj.drink}}</div>
      </div>
    </div>
  </div>
</template>

<script>


export default {
 data() {
  return {
    name: 'why',
    obj: {
      eat: 'rice',
      drink: 'water'
    }
  }
 }
}
</script>

<style lang='less'>
  .father {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: yellowgreen;
    color: blue;
    font-size: 35px;
    text-align: center;
    .son {
      position: absolute;
      width: 300px;
      height: 300px;
      background-color: pink;
      color: aquamarine;
      // margin: 0 auto;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%)
    }
  }
</style>
